<template>
	<view class="container">
		<view class="my">
			<view class="record">
				<view class="settlement">
					<image src="/static/img/agent/pay.png" mode="widthFix"></image>
					<text>结算记录</text>
				</view>
				<view class="money">
					总计：
					<text>￥{{sum_money}}</text>
				</view>
			</view>
			<view class="account">
				<view class="wechat" v-for="(item,index) in list" :key='index' @click="toDetailed(item.id)">
					<view class="left">
						<image src="/static/img/agent/wechat.png" mode="widthFix"></image>
						<view class="transfer">
							<text>转到微信零钱</text>
							<text class="date">{{item.createtime_text}}</text>
						</view>
					</view>
					<view class="right">
						￥<text>{{item.money}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import { settleRecord } from '../../api/api.js'
	export default {
		data() {
			return {
				sum_money: '',
				list: [{
						date: '11-02 11:30',
						money: '28.26'
					},
					{
						date: '11-02 11:30',
						money: '28.26'
					}
				],
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				settleRecord().then(res => {
					this.sum_money = res.data.sum_money
					this.list = res.data.data
				})
			},
			toDetailed(id) {
				uni.navigateTo({
					url: '/pages/agent/user/detailed?id=' + id
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}

	.record {
		width: 100%;
		height: 200upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-bottom: 1upx solid #e9e6e9;

		.settlement {
			height: 40upx;
			line-height: 40upx;
			display: flex;
			align-items: center;
			margin: 38upx 0 28upx;

			image {
				width: 30upx;
				margin-right: 10upx;
			}
		}

		.money {
			color: #999999;

			text {
				color: #fb817f;
			}
		}
	}

	.account {
		width: 100%;
		background-color: #FFFFFF;

		.wechat {
			width: calc(100% - 60upx);
			height: 130upx;
			margin: 0 auto;
			border-bottom: 1upx solid #e9e6e9;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;

				image {
					width: 70upx;
				}

				.transfer {
					display: flex;
					flex-direction: column;
					margin-left: 20upx;
					font-size: 24upx;

					text {
						margin-top: 5upx;
					}

					.date {
						color: #999999;
					}
				}
			}

			.right {
				color: #fb817f;
			}
		}

	}
</style>
